<template>
  <div>
    <h1>错误演示</h1>
    <ul>
      <li>{{ msg }}</li>
      <li @click="fn">click事件</li>
      <li @click="fc2">click事件</li>
      <li @click="handelrClick">点击</li>
      <li @click="fn3">点击调用箭头函数</li>

      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</template>

<script>
console.log('外边：', this)
export default {
  data () {
    return {
      msg: 'hi vue'
    }
  },
  methods: {
    fn3: () => {
      // 注意：不能获取组件实例this =》 undefiend
      console.log('组件实例：', this)
      console.log(123, this.msg)
    },
    handelrClick () {
      // debugger
      const a = 2
      console.log(1)
      console.log(a)
      console.log(this.msg)
    },
    fn2 () {

    }
  },
  fn () {

  }
}
</script>

<style lang="less" scoped>
</style>
